<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>axios文件上传</title>
</head>
<body>

<div>
    昵称：<input type="text" id="ipt-nickname"><br>
    头像: <input type="file" id="ipt-file"><br>
     <input type="hidden" id="ipt-phone"><br>
    <img src="" width="100" id="img-content">

    <button id="bt-submit">保存信息</button>
</div>

</body>
</html>
<script src="./axios.min.js"></script>

<script>
    document.querySelector("#ipt-file")
        .onchange = function (e){
        // console.log(e)
        const fd = new FormData()
        fd.append("pic",e.target.files[0])

        axios.post('/files/upload01' , fd)
            .then(res => {
                console.log(res.data)

                document.querySelector("#img-content").src =  res.data

                document.getElementById("ipt-phone").value = res.data

            })

    }


    document.querySelector("#bt-submit")
        .onclick = function (){

        const nickname = document.getElementById("ipt-nickname").value
        const imageUrl = document.getElementById("ipt-phone").value

        const data = {

            'nickname':nickname,
            'imgUrl' : imageUrl

        }
        axios.post('/user/add',data)
            .then( res =>{


                console.log(res.data)
            })

    }


</script>